<template>
	<view class="content">
		<view class="search">
			<search v-on:search="handleSearch"></search>
		</view>
		<view class="item" v-for="(item, index) in roundList" :key="index">
			<view class="info-box">
				<view class="text-stude">
					<text>{{ item.recptFlag =='true' ? "已入库" : "未出库"  }}</text>
				</view>
				<view class="info-text">
					<view class="text-item text-head">
						<span class="text-title">{{ item.recptName || '无' }}</span>
					</view>
					<view class="text-item">
						<text class="text-tite">出库单号：</text>
						<text class="text-bar">{{ item.recptId || "未知" }}</text>
					</view>
					<view class="text-item">
						<text class="text-tite">制单人：</text>
						<text class="text-bar">{{ "张锋" }}</text>
					</view>
					<view class="text-item">
						<text class="text-tite">制单时间：</text>
						<text class="text-bar">{{ "2024-11-05" }}</text>
					</view>
					<view class="text-item">
						<text class="text-tite">出库类型：</text>
						<text class="text-bar">{{ item.recptType =="item_use_out" ? "领用出库" : "" }}</text>
					</view>
					<view class="text-item">
						<text class="text-tite">出库理由：</text>
						<text class="text-bar">{{ "申请铁托盘区出库" }}</text>
					</view>
				</view>
			</view>

			<view class="nav-btn" @click="handleOutClick(item)">
				去出库
			</view>
		</view>
		<view style="text-align: center;font-size: 26rpx;color:dimgray" v-if="hasMore" @click="handleLoadMore">
			<text>点击加载更多</text>
		</view>

	</view>
</template>

<script>
	import {
		getOutPageInf
	} from '@/api/stockin/stockin.js'
	import search from "@/components/search.vue"
	import tjzz from "@/components/tjzz.vue"
	export default {
		components: {
			search,
			tjzz
		},
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					recptFlag: true,
					recptId: undefined,
					recptType: "item_use_out",
					statusFlag: 0, //单据状态标识
				},

				roundList: [],
				roundLists: [],
				pageNum: 1,
				pageSize: 3,
				hasMore: false,
				longitude: null,
				latitude: null,
				load: false,
				loadText: "加载中",
				tjzzshow: false,
				BASE_URL: "ewa",
				mediateList: [],
				// API_URL: this.env.BASE_URL,
				// API_URL: "",
				STATIC_URL: "",
				// STATIC_URL: this.env.BASE_STATIC_URL,
			};
		},
		created() {
			//验收入库 recptType=3
			this.getOutInf(this.queryParams);
		},
		methods: {

			handleOutClick(param) {
				console.log("物料明细");
				console.log(param.recptId);
				//通过单号查询物资信息，跳转页面
				// uni.navigateTo({
				// 	url: '/pages/myindex/out/itemDetail?recptId=' + param.recptId,
				// })
			},

			//1.查询物资入库单列表
			//2.查询获取物资入库单详细信息
			getOutInf(param) {
				console.log("查询物资入库单列表(分页)");
				getOutPageInf(param).then((res) => {
					console.log(res.rows);
					let itemList = [];
					itemList = res.rows;
					this.roundList = res.rows;
				})
			},
			queryRoundTribunal() {
				this.loadText = "正在为您搜寻";
				this.load = true;

			},

			//搜索
			handleSearch(name) {
				let self = this;
				self.loadText = "正在为您搜索";
				self.load = true;
				this.queryParams.recptName = name;
				this.getOutInf(this.queryParams);
			},

			handleClose() {
				this.tjzzshow = false;
			},
			handleLoadMore() {
				this.pageNum++;
				this.queryRoundTribunal();
			}
		},
		//第一页刷新
		onPullDownRefresh() {
			this.pageNum = 1;
			this.roundList = [];
			this.queryRoundTribunal();
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		.item {
			margin: 24rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			padding: 20rpx;
			box-shadow: 0 20rpx 60rpx 0 rgba(0, 47, 157, 0.10);
			border-radius: 16rpx;

			.info-box {
				width: 100%;
				display: inline-block;
				font-size: 24rpx;
				color: #3D3E44;
				letter-spacing: 0;
				position: relative;


				.text-stude {
					position: absolute;
					top: 0;
					right: 20rpx;
					font-size: 12rpx;
					background: #e2e2e2;
					border-radius: 20rpx;
					color: red;
					padding: 5px 10px;
				}


				.info-text {
					display: inline-block;
					margin-left: 20rpx;
					vertical-align: middle;

					.text-item {
						width: 450rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						.text-title {
							font-size: 28rpx;
							font-weight: 600;
							color: #275555;
						}

						.text-tite {
							color: #333333;
							font-size: 16rpx;
						}

						.text-bar {
							vertical-align: middle;
							color: #999999;
							font-size: 14rpx;
						}


						.icon-phone {
							width: 36rpx;
							height: 36rpx;
							vertical-align: middle;
							margin-left: 1rem;
						}
					}

					.text-head {
						border-bottom: 1rpx solid #e2e2e2;
						margin-bottom: 10rpx;
						padding: 10rpx 0 15rpx 0;
						width: 620rpx;
					}
				}

				.address {
					width: 600rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

				}
			}


			.nav-btn {
				// width: 60%;
				height: 58rpx;
				background: #447CFF;
				box-shadow: 0 12rpx 24rpx 0 rgba(0, 61, 205, 0.23);
				border-radius: 12rpx;
				font-size: 18rpx;
				color: #FFFFFF;
				letter-spacing: 0;
				line-height: 58rpx;
				text-align: center;
				vertical-align: middle;
				margin: auto;
				margin-top: 20rpx;
			}
		}


		.jszc {
			font-family: PingFangSC-Regular;
			font-size: 10px;
			color: #447CFF;
			letter-spacing: 0;
			line-height: 10px;
			background: rgba(255, 255, 255, 0.7);
			padding: 10rpx;
			text-align: center;
			margin-top: 10rpx;
		}

		.box-search {
			position: relative;
			height: 88rpx;
		}


		.mini-canel {
			position: flex;
			background: linear-gradient(to top, #2C21E3, #5862E3, #676CBF);
			float: right;
			display: inline-block;
			bottom: 90rpx;
			height: 80rpx;
			line-height: 80rpx;
			flex-direction: row;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;

		}

		.invitation-search {
			position: absolute;
			width: 480rpx;
			height: 80rpx;
			margin-left: 28rpx;
			line-height: 80rpx;
			background: rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: row;
			box-sizing: border-box;
			padding: 0px 3%;
			align-items: center;
			justify-content: space-between;
		}

		.invitation-search input {
			font-size: 24px;
			margin-left: 10rpx;
		}

		.invitation-search label {
			font-size: 18px;
		}
	}
</style>